import React, { Component } from "react";
import { Table, Popconfirm, Button, Tag } from "antd";
import { http } from "../../../api";
import moment from "moment";
export default class Expmana extends Component {
  state = {
    columns: [
      {
        title: "序号",
        key: "",
        dataIndex: "",
        render: (v, item, index) => {
          return index;
        },
        align: "center",
      },
      {
        title: "面经标题",
        dataIndex: "title",
        key: "title",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "作者",
        dataIndex: "phone",
        key: "phone",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "时间",
        dataIndex: "time",
        key: "time",
        render: (v, item, index) => {
          return moment(v).format("YYYY-MM-DD hh:mm:ss");
        },
        align: "center",
      },
      {
        title: "分类",
        dataIndex: "code",
        key: "code",
        render: (v, item, index) => {
          return v;
        },
        align: "center",
      },
      {
        title: "状态",
        dataIndex: "status",
        key: "status",
        render: (v, item, index) => {
          //颜
          {
            if (v == 0) {
              return <Tag color="magenta">{"等待审核"}</Tag>;
            } else {
              return <Tag color="#87d068">{"审核通过"}</Tag>;
            }
          }
        },
        align: "center",
      },
      {
        title: "操作",
        render: (v, item, index) => {
          return (
            <div>
              <Button
                onClick={() => this.showUpdateModal(item)}
                style={{ marginRight: 10 }}
                type="primary"
                size="small"
              >
                审核通过
              </Button>
              <Popconfirm
                title="你真的要删除吗?"
                onConfirm={() => this.delconfirm(item)}
                okText="确定"
                cancelText="取消"
              >
                <Button type="danger" size="small">
                  审核失败
                </Button>
              </Popconfirm>
              <Button
                onClick={() => this.gotodetails(item, index)}
                style={{ marginLeft: 10 }}
                type="primary"
                color="purple"
                size="small"
              >
                文章详情
              </Button>
            </div>
          );
        },
        align: "center",
      },
    ],
    explist: [],
  };

  showUpdateModal = (item) => {
    http
      .updateExperience({
        _id: item._id,
        status: 1,
        star: 0,
        collect: 0,
        comment: [],
        heat: 0,
      })
      .then((res) => {
        http.experiencelist().then((res) => {
          if (res.data.code == 200) {
            var explist = res.data.val;
            this.setState({
              explist: explist,
            });
          }
        });
      });
  };
  delconfirm = (item) => {
    http.experienceDelete({ _id: item._id }).then((res) => {
      if (res.data.code == 200) {
        var explist = this.state.explist.filter((val) => val._id !== item._id);
        this.setState({
          explist: explist,
        });
      }
    });
  };
  componentDidMount() {
    http.experiencelist().then((res) => {
      if (res.data.code == 200) {
        var explist = res.data.val;
        explist.forEach((item, index) => {
          http.getuserinfo({ phone: item.phone }).then((res) => {
            explist[index].avatar = res.data.val[0].avatar;
            explist[index].username = res.data.val[0].username;
          });
        });
        this.setState({
          explist: explist,
        });
        // console.log(this.state.explist);
      }
    });
  }
  gotodetails = (item, i) => {
    // console.log(this.state.explist[i]);
    http
      .updateExperience({
        _id: this.state.explist[i]._id,
        avatar: this.state.explist[i].avatar,
        username: this.state.explist[i].username,
      })
      .then((res) => {
        this.props.history.push(
          "/main/tiku/experience/details?_id=" + item._id
        );
      });
  };
  render() {
    const { columns, explist } = this.state;
    return (
      <div>
        <h2>面经管理</h2>
        <Table
          columns={columns}
          dataSource={explist}
          style={{ marginTop: 10, width: "100%" }}
          bordered
          size="small"
          id="mytable"
          rowKey={(item) => item._id}
          pagination={{ pageSize: 10 }}
        />
      </div>
    );
  }
}
